/*
 * 设备管理列表


 */
<style lang="less" rel="stylesheet/less" type="text/less" >
.v-customer-banner-index{
	.ivu-table-column-center{
		padding: 5px 0;
	}
	.ivu-table-cell{
		padding-left: 10px;
		padding-right: 10px;
	}
	.info-banner{
        display: flex;
        justify-content: center;
		white-space: nowrap;
		padding: 5px 0;
	}
	.info-thumb{
		width: 120px;
		height: 120px;
		cursor: pointer;
		display: flex;
		align-items: center;
		img{
			width: 100%;
		}
	}
	.deleted, .hot, .new, .sale {
		cursor: pointer;
	}
}
</style>
<template>
	<div class="v-customer-banner-index">

		<Table
			:columns="columns"
			:loading="loading"
			:data="device_index"
			:height="tableHeight()"
			border
			class="personal-scrollbar"
			@on-sort-change="sortable"/>
	</div>
</template>

<script>
import { Tag, Button } from 'iview';
import showPictureMixin from 'src/views/mixins/showPictureMixin';
import { computedTableHeight } from 'src/views/mixins/computedTableHeight';

export default {
	name: 'BannerIndex',
	mixins: [showPictureMixin, computedTableHeight],
	props: {
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
		device_index: {
			type: Array,
			default() {
				return [];
			},
		},
		manufactures: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {

			columns: [
				{
					title: this.$t('equipment.device_name'),
					key: 'name',
					align: 'center',
					render: (h, { row }) => <div> { row.name || '-' } </div>,
				},
				{
					title: this.$t('equipment.producer_img'),
					key: 'producer_img',
					align: 'center',
					render: (h, { row }) => <div>{
						// const thumb_image = row.product_img ? <img src={ row.product_img } on-click={() => this.showPicture(row.product_img)} alt="无" /> : '无';
						// return (
						// 	<div class="info-banner">
						// 		<div class="info-thumb">{ thumb_image }</div>
						// 	</div>
						// );
						row.product_img
							? <img src={ row.product_img} alt={this.$t('common.none')} width="50%"/>
							: this.$t('common.none')
					}
					</div>,
				},
				{
					title: this.$t('equipment.specification'),
					key: 'bluetooth_code',
					width: 120,
					align: 'center',
					render: (h, { row }) => <div> { row.bluetooth_code || '-' } </div>,
				},
				{
					title: this.$t('equipment.sku'),
					key: 'price',
					width: 70,
					align: 'center',
					render: (h, { row }) => <div> { row.price || '-' } </div>,
				},
			     {
					title: this.$t('equipment.producer'),
					key: 'name',
					align: 'center',
					render: (h, { row }) => {
						for (let i = 0; i < this.manufactures.length; i++) {
							if (Number(this.manufactures[i].id) == Number(row.manufacture_id)) {
								return (<div> { this.manufactures[i].name || '-' } </div>);
							}
						}
					},
				},
				{
					title: this.$t('equipment.luminance_min'),
					key: 'luminance_min',
					width: 70,
					align: 'center',
					render: (h, { row }) => <div> { row.luminance_min} </div>,
				},
				{
					title: this.$t('equipment.luminance_max'),
					key: 'luminance_max',
					width: 100,
					align: 'center',
					render: (h, { row }) => <div> { row.luminance_max } </div>,
				},
				{
					title: this.$t('equipment.color_temperature_min'),
					key: 'color_temperature_min',
					width: 70,
					align: 'center',
					render: (h, { row }) => <div> { row.color_temperature_min} </div>,
				},
				{
					title: this.$t('equipment.color_temperature_max'),
					key: 'color_temperature_max',
					width: 100,
					align: 'center',
					render: (h, { row }) => <div> { row.color_temperature_max} </div>,
				},
				{
					title: 'service uuid',
					key: 'service_uuid',

					align: 'center',
					render: (h, { row }) => <div> { row.service_uuid || '-' } </div>,
				},
				{
					title: 'read uuid',
					key: 'read_uuid',

					align: 'center',
					render: (h, { row }) => <div> { row.read_uuid || '-' } </div>,
				},
				{
					title: 'write uuid',
					key: 'write_uuid',

					align: 'center',
					render: (h, { row }) => <div> { row.write_uuid || '-' } </div>,
				},
				{
					title: this.$t('banner.priority'),
					key: 'sort_order',
					align: 'center',
					width: 90,
					sortable: 'custom',
					render: (h, { row }) => <div> { String(row.sort_order) || '-' } </div>,
				},
				{
					title: this.$t('category.is_show'),
					key: 'is_show',
					width: 50,
					align: 'center',
					render: (h, { row }) => {
						const is_showText = <div>是</div>;
						const no_showText = <div>否</div>;
						if (row.is_show == 0) {
							return no_showText;
						}
						return is_showText;
					},
				},
				{
					title: this.$t('equipment.purchase_at'),
					width: 120,
					key: 'created_at',
					align: 'center',
					render: (h, { row }) => {
						let date = <div>{ this.$t('common.none') }</div>;
						if (row.created_at) {
							const [day, time] = row.created_at.split(' ');
							date = (<div>
								<div>{day}</div>
								<div>{time}</div>
							</div>);
						}
						return date;
					},
				},


				{
					title: this.$t('common.operation'),
					align: 'center',
					width: 120,
					render: (h, { row }) => (
						<div>
							<Button name="index__edit" size="small" style={{ marginRight: '5px' }} on-click={() => { this.$emit('edit', row); }} type="primary">
								{ this.$t('common.edit') }
							</Button>
							<Button name="index__delete" size="small" style={{ marginRight: '5px' }} on-click={() => { this.$emit('delete', row.id); }} type="error">
								{ this.$t('common.delete') }
							</Button>
						</div>),
				},
			],
		};
	},
	methods: {


		/**
         * 排序的回调
         * @param  {Object} param {对应列的属性对象,里面包含了column列属性，key值，order排序字段}
         * @return {undefined}
         */
		sortable(param) {
			const search_param = {
				sort_column: param.key,

				sort_by: param.order === 'normal' ? '' : param.order,
			};

			this.$emit('sort', search_param);
		},

	},
};
</script>
